<template>
  <div class="operation_logo">
    <div class="opera_logo">
      <span>类型</span>
      <el-select v-model="value" size="small" placeholder="全部" style="width:95px;margin-left:0px;margin-top:8px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="choose">
        <chooseTime @timeChange="timeChange"></chooseTime>
      </div>
    </div>
    <el-table :data="AutData" stripe style="width: 100%;margin-top:20px">
      <el-table-column fixed prop="operCreateTime" label="操作时间"> </el-table-column>
      <el-table-column fixed prop="name" label="类型">
        <template slot-scope="scope">
          {{ scope.row.name.substr(0, 2) }}
        </template>
      </el-table-column>
      <el-table-column fixed label="描述" width="300">
        <template slot-scope="scope">
          <span v-if="scope.row.adGroupUpdateName"> {{scope.row.adGroupUpdateName}}</span>
          <span v-else-if="scope.row.updateCampaignName">{{scope.row.updateCampaignName}}</span>
          <span v-else-if="scope.row.sendUserName">{{scope.row.sendUserName}} </span>
          <span v-else-if="scope.row.keywordsLength">{{scope.row.keywordsLength}}</span>
          <span v-else-if="scope.row.bindName">{{scope.row.bindName}}</span>
          <span v-else-if="scope.row.negativeKeywordLength">{{scope.row.negativeKeywordLength}}</span>
          <span v-else-if="scope.row.campaignName">{{scope.row.campaignName}}</span>
          <span v-else-if="scope.row.adGroupName">{{scope.row.adGroupName}}</span>
          <span v-else-if="scope.row.keywordsUpdateLength">{{scope.row.keywordsUpdateLength}}</span>
          <span v-else-if="scope.row.keywordsName">{{scope.row.keywordsName}}</span>
          <span v-else-if="scope.row.campaignNegativeKeywordLength">{{scope.row.campaignNegativeKeywordLength}}</span>
          <span v-else-if="scope.row.groudDelName">{{scope.row.groudDelName}}</span>
          <span v-else-if="scope.row.deleteGroudCamLength">{{scope.row.deleteGroudCamLength}} </span>
          <span v-else-if="scope.row.deleteCampCamLength">{{scope.row.deleteCampCamLength}} </span>
          <span v-else-if="scope.row.compainsName">{{scope.row.compainsName}} </span>
          <span v-else-if="scope.row.groundCampName">{{scope.row.groundCampName}}</span>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="operIp" label="ip地址"> </el-table-column>
    </el-table>
     <pagination :total="total" :page="page" :pageSize="pageSize" @pageSize="changePageSize" @page="changePage"></pagination>
  </div>
</template>

<script>
import {findOpeation,findOpeationUserId} from '@/api/user'
import chooseTime from '../../ad/overview/components/chooseTime/index'
import pagination from '@/components/elementComponents/pagination.vue'
export default {
  name: 'OperationLog',
  data() {
    return {
      AutData: [],
      value: 'all',
      options: [{
        value: 'all',
        label: '全部'
      },
      {
        value: 'insert',
        label: '创建'
      },
       {
        value: 'delete',
        label: '删除'
      },
       {
        value: 'edit',
        label: '更改'
      },
      {
        value: 'export',
        label: '导出'
      }],
      total: 0,
      pageSize: 10,
      page: 1,
      time: ''
    }
  },
  components: {
    pagination,
    chooseTime
  },
  props:{
    isShow: Boolean,
    userId: Number,
    userRoleName: String
  },
  computed: {
    teamId() {
      return this.$store.state.team.teamId
    }
  },
  watch: {
    page(val, old) {
      this.page = val
      this.userRoleName !== 'visitor'?  this.findOpeationUser() : this.getFindOpeation()
    },
    pageSize(val, old) {
      this.pageSize = val
      this.userRoleName !== 'visitor'?  this.findOpeationUser() : this.getFindOpeation()
    },
    value(val, old) {
      this.value = val
      this.pageSize = 10
      this.page = 1
      this.userRoleName !== 'visitor'?  this.findOpeationUser() : this.getFindOpeation()
    },
    userId(val, old) {
      this.userId = val
      this.userRoleName !== 'visitor'?  this.findOpeationUser() : this.getFindOpeation()
    },
    userRoleName(val, old) {
      this.userRoleName = val
    },
    time(val, old) {
      this.time = val
      this.pageSize = 10
      this.page = 1
      this.userRoleName !== 'visitor'?  this.findOpeationUser() : this.getFindOpeation()
    }
  },
  mounted() {
    // this.getFindOpeation()
  },
  methods: {
    timeChange(value) {
     this.time = value
    },
    changePageSize(data) {
      this.pageSize = data
    },
    changePage(data) {
      this.page = data
    },
    // 概述
    getSummary() {
      this.AutData.forEach(item => {
            item.operRequParam = JSON.parse(item.operRequParam)
            if (item.operRequParam.length > 0) {
              let data = ''
              let dataGroup = ''
              let keywords =  ''
              let groudDelName = ''
              let compainsName = ''
              item.operRequParam.forEach(items => {
                if (items.adGroupUpdate) {
                  item.adGroupUpdateName = ''
                  dataGroup = '【' + items.name + '】'  + dataGroup
                } else if (items.updateCampaign) {
                  if (items.name.indexOf('_3YData_') !== -1) {
                    let str = items.name
                    let first = str.indexOf('_') + 1
                    let gang = str.indexOf('_', first)
                    items.name = str.substring(gang).substring(1,str.length)
                    data =  '【' + items.name + '】' + data
                  } else {
                    data =  '【' + items.name + '】' + data
                  }
                } else if (item.name === '更改关键词') {
                  keywords ='【' + items.name + '】' + keywords
                } else if (item.name === '删除广告组') {
                  groudDelName =  '【' + items.name + '】' + groudDelName
                } else if (item.name === '删除广告系列') {
                  if (items.name.indexOf('_3YData_') !== -1) {
                    let str = items.name
                    let first = str.indexOf('_') + 1
                    let gang = str.indexOf('_', first)
                    items.name = str.substring(gang).substring(1,str.length)
                    compainsName = '【' + items.name + '】' + compainsName
                  } else {
                    compainsName = '【' + items.name + '】' + compainsName
                  }
                }
              })
              if(dataGroup) return item.adGroupUpdateName = dataGroup  + '广告组被更改'
              if(data) return item.updateCampaignName = data + '广告系列被更改'
              if(keywords) return item.keywordsName =  keywords+ '关键词被更改'
              if (groudDelName) return item.groudDelName =  groudDelName + '广告组被删除'
              if (compainsName) return item.compainsName =  compainsName + '广告系列被删除'
            } else {
              if(item.operRequParam.sendUserId) {
                item.sendUserName = ''
                item.sendUserName = '【' + item.operRequParam.receiveUserId + '】' + '用户被邀请'
              } else if (item.operRequParam.keywords && item.name === '创建关键词') {
                item.keywordsLength = ''
                item.keywordsLength = item.operRequParam.keywords.length + '个关键词被创建'
              } else if (item.operRequParam.secretName) {
                item.bindName = ''
                item.bindName = '【' + item.operRequParam.secretName + '】' + '证书被绑定'
              } else if (item.operRequParam.campaign && item.name === '创建广告系列') {
                if (item.operRequParam.campaign.name.indexOf('_3YData_') !== -1) {
                  let str = item.operRequParam.campaign.name
                  let first = str.indexOf('_') + 1
                  let gang = str.indexOf('_', first)
                  item.operRequParam.campaign.name = str.substring(gang).substring(1,str.length)
                  item.campaignName = '【' + item.operRequParam.campaign.name + '】' + '广告系列被创建'
                } else {
                  item.campaignName = '【' + item.operRequParam.campaign.name + '】' + '广告系列被创建'
                }
              } else if (item.operRequParam.adGroup&& item.name === '创建广告组') {
                item.adGroupName = '【' + item.operRequParam.adGroup.name + '】' + '广告组被创建'
              } else if (item.operRequParam.negativeKeyword) {
                item.negativeKeywordLength = item.operRequParam.negativeKeyword.length + '个广告组屏蔽词被创建'
              } else if (item.operRequParam.campaignNegativeKeyword) {
                item.campaignNegativeKeywordLength = item.operRequParam.campaignNegativeKeyword.length + '个广告系列屏蔽词被创建'
              } else if (item.name === '删除广告系列屏蔽词') {
                item.deleteGroudCamLength =  item.operRequParam.keywords.length + '个广告系列屏蔽词被删除'
              }
              else if (item.name === '删除广告组屏蔽词') {
                item.deleteCampCamLength =  item.operRequParam.keywords.length + '个广告组屏蔽词被删除'
              } else if (item.name === '创建广告系列组') {
                item.groundCampName = '【' + item.operRequParam.name + '】' + '广告系列组被创建'
              }
            }
          })
    },
    // 获取当前用户操作日志
    async getFindOpeation() {
        let data = {
          pageNum: this.page,
          pageSize: this.pageSize,
          type: this.value,
          startTime: this.time[0],
          endTime: this.time[1],
          teamId: this.teamId
        }
        const res = await findOpeation(data)
        if (res.data.code === 20000) {
          this.AutData = res.data.data.list
          this.total = res.data.data.total
          this.getSummary()
        } else return false
    },
   async findOpeationUser() {
        let data = {
          pageNum: this.page,
          pageSize: this.pageSize,
          type: this.value,
          startTime: this.time[0],
          endTime: this.time[1],
          teamId: this.teamId,
          userId: this.userId
        }
        const res = await findOpeationUserId(data)
        if (res.data.code === 20000) {
          this.AutData = res.data.data.list
          this.total = res.data.data.total
          this.getSummary()
        } else return false
    }
  }
}
</script>

<style lang="scss" scoped>
.operation_logo {
  width: 100%;
  height: 100%;
}
.opera_logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 30px;
    span {
      position: relative;
      right: 20px;
      top: 5px;
      left: 0px;
      font-size: 14px;
      width: 5%;
    }
    .choose {
      display: flex;
      justify-content: flex-end;
      position: relative;
      top: 3px;
      width: 86%;
    }
  }
</style>
